@import 'public';
body{
    width: 100%;
    height: 5000px;
}
#box{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    position: relative;
    .top{
         width: 100%;
        height: 300px;
        border: 1px solid green;
        position: absolute;
        left: 0;
        top: 0;
        .left{
            width: 200px;
            height: 300px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
            & .lt-btn{ // & :  #box .top .left 
                width: 30px;
            }
        }
    }
    .bottom{
        width: 100%;
        height: 100px;
        border: 1px solid blue;
        position: absolute;
        left: 0;
        bottom: 0;
    }
}
nav{
    a{
        color: red;
        header &{///代表父选择器  nav a
            color: green;
        }
    }
}

#top_nav_li{
    border:{
        style : solid;
        left:{
            width: 4px;
            color: #888;
        }
        right:{
            width:2px;
            color:#ccc;
        }
        top:{
            width: 6px;
            color: pink;
        }
        bottom:{
            width: 100px;
            color: yellow;
        }
    }
}
$color : tem; //声明一个变量
.body{
    // font-size: $fontSize;
    font: #{$fontSize} / #{$lineHeight};
    @if $color == dark{
        background-color : pink;
    }@else if $color == tem {
        background-color: black;
    }@else {
        background-color: yellow;
    }
}

$colnum : 4; //列数
@for $i from 1 through $colnum{
    col-#{$i}{
        width: 100% / $colnum * $i;
    }
}

@for $j from 1 to $colnum{
    col-#{$j}{
        height: 100% / $colnum * $j;
    }
}

@each $k in $colors{
    .div-#{$k}{
        background-color : $k;
    }
}

#box{
    @include size(200px);
    @include position(absolute,500px,200px);
}

.box{
    background-color: fnColor(you);
}
.pox{
    @extend #box;
    border: 1px solid black;
}